<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Task-108</title>
    <script src="./jquery-3.2.1.js"></script>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style type="text/css">
        .textarea{
            width: 65%; 
            min-height: 120px; 
            max-height: 300px;
            padding: 3px; /*内边距*/
            border: 1px solid #818A97; /*边框实线*/
            font-size: 14px; /*字体大小*/
            line-height: 20px; /*行高*/
            word-wrap: break-word; /*允许换行*/
        }
</style>
</head>

<body>
    <div class="container" id="main">
        <div class="row"><!--行-->
            
            <div class="col-xs-12 col-sm-10">
                <h1>统一建模语言理论测试</h1><br/>
                <div class="col-xs-12 col-sm-3">
                    <p>考试科目：统一建模语言</p>
                </div>
                <div class="col-xs-12 col-sm-3">
                    <p>时间：100分钟</p>   
                </div>
                <div class="col-xs-12 col-sm-3">
                    <p>得分：100</p>
                </div>
            </div>

            <div class="col-xs-12 col-sm-10">
                <div class="col-xs-12 col-sm-3">
                        班级：<input name="myclass" type="text" placeholder="WH002" id="myclass"><!--placeholder 占位符-->
                </div>
                <div class="col-xs-12 col-sm-3">
                        学号：<input name="studentID" type="text" placeholder="0201221047" id="studentID"> 
                </div>
                <div class="col-xs-12 col-sm-3">
                        姓名：<input name="name" type="text" placeholder="你猜啊" id="name">
                </div>
            </div>
        
            <div class="col-xs-12 col-sm-12 " name="填空题">
            <h3>一、填空题（每空5分，共20分）</h3>
            <ol>
                <li>UML的中文全称是：<input type="text" placeholder="统一建模语言" name = "blank" id = "blank1"> </li><br/>
                <li>对象最突出的特征是：
                    <input type="text" placeholder="封装性" name = "blank" id = "blank2"> 
                    <input type="text" placeholder="继承性" name = "blank" id = "blank3"> 
                    <input type="text" placeholder="多态性" name = "blank" id = "blank4"> </li>
            </ol>
            </div>
        
            <div class="col-xs-12 col-sm-12 " name="单选题">
            <h3>二、选择题（每题10分，共20分）</h3>
            <ol>
                <li>UML与软件工程的关系是：
                    <dl>
                        <dt><input name="only1" type="radio" value="A" id="false">（A）UML就是软件工程</dt>
                        <dt><input name="only1" type="radio" value="B" id="ture1">（B）UML参与到软件工程中软件开发的几个阶段</dt>
                        <dt><input name="only1" type="radio" value="C" id="false">（C）UML与软件工程无关</dt>
                        <dt><input name="only1" type="radio" value="D" id="false">（D）UML是软件工程的一部分</dt>
                    </dl>
                </li>
                <li>Java语言支持：
                    <dl>
                        <dt><input name="only2" type="radio" value="A" id="ture2">（A）单继承</dt>
                        <dt><input name="only2" type="radio" value="B" id="false">（B）多继承</dt>
                        <dt><input name="only2" type="radio" value="C" id="false">（C）单继承和多继承都支持</dt>
                        <dt><input name="only2" type="radio" value="D" id="false">（D）单继承和多继承都不支持</dt>
                    </dl>
                </li>
            </ol>
            </div>
        
            <div class="col-xs-12 col-sm-12 " name="多选题">
            <h3>三、多选题（每空10分，共20分）</h3>
            <ol>
                <li>用例的粒度分为以下哪三种：
                    <dl>
                        <dt><input name="morechoice1" type="checkbox" value="A" id="a1">（A）概述级 </dt>
                        <dt><input name="morechoice1" type="checkbox" value="B" id="b1">（B）需求级</dt>
                        <dt><input name="morechoice1" type="checkbox" value="C" id="c1">（C）用户目标级</dt>
                        <dt><input name="morechoice1" type="checkbox" value="D" id="d1">（D）子功能级</dt>
                    </dl>
                </li>
                <li>类图由以下哪三部分组成：
                    <dl>
                        <dt><input name="morechoice2" type="checkbox" value="A" id="a2">（A）名称（Name）</dt>
                        <dt><input name="morechoice2" type="checkbox" value="B" id="b2">（B）属性（Attribute）</dt>
                        <dt><input name="morechoice2" type="checkbox" value="C" id="c2">（C）操作（Operation） </dt>
                        <dt><input name="morechoice2" type="checkbox" value="D" id="d2">（D）方法（Function） </dt>
                    </dl>
                </li>
            </ol>
            </div>
        
            <div class="col-xs-12 col-sm-12 " name="判断题">
            <h3>四、判断题（每题10分，共20分）</h3>
            <ol>
                <li>用例图只是用于和客户交流和沟通的，用于确定需求
                <input name="choice1" type="radio" value="A" id ="ture3"> √
                <input name="choice1" type="radio" value="B" id ="false3"> ×
                </li>
                <li>在状态图中，终止状态在一个状态图中允许有多个
                    <input name="choice2" type="radio" value="A" id ="ture4"> √
                    <input name="choice2" type="radio" value="B" id ="false4"> ×
                </li>
            </ol>
            </div>

            <div class="col-xs-12 col-sm-12" name="简答题">
            <h3>五、简答题（每题20分，共20分）</h3>
            <ol>
                <li>简述什么是模型以及模型的表现形式？</li>
                <div class="textarea" id="textarea" contenteditable="true"> 
                    <!--contenteditable 可编辑-->
                    <div>模型是对现实世界的简化和抽象，模型是对所研究的系统、过程、事物或概念的一种表达形式，可以是物理实体，可以是某种图形，或者是一种数学表达式。</div>
                </div>
            </ol>
            </div>
        </div>
        <br/>
        
        <div class="submit">
            <button type="button" class="btn" data-toggle="modal" data-target="#myModal" id="submit">计算成绩</button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Task-108</h4> 
                    </div>
                    <div class="modal-body" id="modal-body"></div>
                    <div class="modal-footer"> 
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
                        <button type="button" class="btn btn-primary">提交</button> 
                    </div>
                </div>
            </div>
        </div>

        <!-- 有问题，还需修改 -->
        <script>
            function $(id) {
                return document.getElementById(id);
            }
            //获取个人信息
            function personalIfo() {
                let name = $('name').value,
                    myclass = $('myclass').value,
                    studentID = $('studentID').value;
                return ['姓名：'+name +'，班级：' + myclass + ',学号：' + studentID];
            }
            //单选判断
            function radio() {
                let scores = 0;
                if ($('ture1').checked) {
                    scores+=10;
                }
                if ($('ture2').checked) {
                    scores+=10;
                }
                if ($('false3').checked) {
                    scores+=10;
                }
                if ($('ture4').checked) {
                    scores+=10;
                }
                return scores;
            }
            //多选
            function checked() {
                let scores = 0;
                if ($('a1').checked&&$('b1').checked&&$('d1').checked) {scores+=10;}
                if ($('a2').checked&&$('b2').checked&&$('c2').checked) {scores+=10;}
                return scores;
            }
            //填空简答
            function write() {
                let scores = 0;
                if($('blank1').value=='统一建模语言'){scores+=5}
                if($('bkank2').value=='封装性'&&$('blank3').value=='继承性'&&$('blank4').value=='多态性'){scores+=15};
                if($('textarea').value=='模型是对现实的简化和抽象，模型是对所研究的系统、过程、事物或者概念的一种表达形式。可以是物理实体；可以是某种图形；或者是一种数学表达式'){scores+=20};
                return scores;
            }
            //计算总成绩；统计个人信息
            function main() {
                if($('name').value==""||$('myclass').value==""||$('studentID').value==""){
                    alert('请输入姓名/班级/学号');
                    window.location.href="http://zuoanzy.gitee.io/task-108/"; 
                }
                let scores = 0,
                personalInformation = personalIfo(),
                radios= radio(),
                check = checked(),
                writen = write();
                scores=scores+radios+check+writen;
                $('modal-body').innerHTML = personalInformation+'得分:'+scores;
            }
            $('submit').addEventListener('click',main,false);
            //     document.getElementById('modal-body').innerHTML = personalInformation+'得分:'+scores;
            // }
            // document.getElementById('submit').addEventListener('click', main,false);
        </script>
    </div>
</body>
</html>